<template>
  <div>
    <!-- 修改组件 -->
    <el-button
      style="color:#0B9AC3;border:none;"
      icon="el-icon-edit"
      circle
      @click="DialogVisibleMod = true"
    ></el-button>
    <div>
      <el-dialog
        title="编辑"
        :visible.sync="DialogVisibleMod"
        width="900px"
        :before-close="handleClose"
        :show-close="false"
        :modal-append-to-body="false"
        style="text-align: left;"
      >
        <div
          class="list"
          v-for="(item,index) in attributeOrderClone"
          :key="index"
          v-if="item.modificationSign"
        >
          <span class="fon">{{item.CN}}:</span>
          <span class="inb" v-if="item.type==='input'">
            
            <!-- {{fromModData[item.EN]}} -->
            <el-input
              :disabled="item.examineDisabled"
              v-model="fromModData[item.EN]"
              placeholder="请输入内容"
              @blur="BurExp($event,item,index)"
              clearable
              size="mini"
            ></el-input>
          </span>
          <span v-if="!item.result" class="font_color">{{item.err}}</span>
          <span class="inb" v-if="item.type=='date'">
            <!-- <h1>{{modData.createTime}}</h1> -->
            <el-date-picker
              :disabled="item.examineDisabled"
              v-model="fromModData[item.EN]"
              type="datetime"
              placeholder="选择日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              @change="getSTime"
              style="width:93%"
              size="mini"
            ></el-date-picker>
          </span>

          <span v-if="item.type=='select'">
            <el-select
              :disabled="item.examineDisabled"
              v-model="fromModData[item.EN]"
              placeholder="请选择"
              size="mini"
            >
              <el-option
                v-for="i in item.option"
                :key="i.value"
                :label="i.label"
                :value="i.value"
              ></el-option>
            </el-select>
          </span>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="modifyData(true,modData)" size="mini">确定</el-button>
          <el-button @click="modifyData(false,modData)" size="mini">取消</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  props: ["modData", "attributeOrder"],
  data() {
    return {
      DialogVisibleMod: false,
      //深克隆
      attributeOrderClone:undefined,
      //表单里面的值
      fromModData:undefined,
    };
  },
  mounted(){
    [this.attributeOrderClone,this.fromModData]=JSON.parse(JSON.stringify([this.attributeOrder,this.modData]))
    // console.log('*****************')
    // console.log(this.attributeOrderClone)
    // console.log(this.fromModData)
  },
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
           this.modifyData(false, this.modData);
          done();
        })
        .catch(_ => {});
    },
    //转化时间格式
    getSTime(val) {
      this.modData.createTime = val;
    },
    //确定修改-取消修改
    modifyData(value, modData) {
      //value=true  确定修改
      //value=false  取消修改
      // console.log(value,modData)
      let bur = true;
      if (value === false) {
        this.$emit("modifyData", false, this.fromModData);
        this.DialogVisibleMod = false;
      } else {
        for (let i = 0; i < this.attributeOrderClone.length; i++) {
          if (this.attributeOrderClone[i].result === false) {
            bur = false;
          }
        }

        if (bur === true && value === true) {
          this.$emit("modifyData", value, this.fromModData);
          this.DialogVisibleMod = false;
        } else if (bur === false && value === true) {
          alert("请输入合法内容！");
        }
      }
    },

    //正则表达式
    BurExp(e, item, index) {
      if (this.attributeOrderClone[index].attributeOrderClone) {
        item.result = true;
      } else {
        let boolean = new RegExp(item.Exp).test(e.target.value);
        item.result = boolean;
      }
    }
  }
};
</script>
<style scoped src="src/styles/allCss.css"></style>
